<template>
	<view class="u-page u-flex-col">
		<!-- 自定义tabbar -->
		<u-navbar title="评阅计划" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="search-box">
			<view class="search-input">
				<u-search v-model="keyword" @custom="goSearch" :clearabled="false" placeholder="请输入标题关键词" height="40"
					bg-color="#F1F1F5" placeholder-color="#A2A6AC"
					:action-style="{width:'130rpx',height:'80rpx',background:'#2A8FFC','border-radius':'25px','margin-left':'20rpx','font-size':'28rpx',color:'#fff','line-height':'80rpx','text-align':'center'}">
				</u-search>
			</view>
			<!-- <view class="drop-box"> -->
			<view class="select-tabs">
				<view class="exhibition" :class="{ selectActiveTab: index === currSelectIndex}"
					@click="handleSelectClick(index)" v-for="(item, index) in readandappraiseTabs" :key="index">
					<template v-if="!index ">
						<view class="text">
							{{ typeName || '计划类型' }}
						</view>
					</template>
					<template v-else-if="index && !item.title">
						<view class="text">
							{{ JHZT == '1'?'未完成':'已完成'}}
						</view>
					</template>
					<template v-else>
						<view class="text">
							{{ item.title}}
						</view>
					</template>
					<u-icon :name="index == currSelectIndex? 'arrow-up': 'arrow-down'" size="14"
						:color="index == currSelectIndex? '#2A8FFC'  : '#c0c4cc' "></u-icon>
				</view>

				<div class="popur" :class="{popurActive: isShowPopur}" v-show="isShowPopur">
					<div class="popur-card" :class="{popurItenActive: activeSelectIndex[currSelectIndex] == index}"
						@click="handleCardClick(item,index)"
						v-for="(item, index) in readandappraiseTabs[currSelectIndex].config" :key="item.value">
						<template v-if="readandappraiseTabs[currSelectIndex].type === 'contentDep'">
							{{currSelectIndex}}
							<view class="sub-client-content">
								<scroll-view scroll-y="true" style="max-height: 400rpx;">
									<template
										v-if="subdepartmentList.length > 0 || readandappraiseTabs[currSelectIndex].items.length > 0">
										<template v-if="currSelectIndex == 2">
											<u-grid :col="2">
												<u-grid-item v-for="(itemSub,indexSub) in subdepartmentList"
													:key="indexSub" :custom-style="{padding:'0rpx',minHeight:'80rpx'}"
													@click="selectSub(indexSub)">
													<view :class="[BMID == itemSub.ID ? 'active' : '']">
														{{itemSub.label}}
													</view>
												</u-grid-item>
											</u-grid>
										</template>
										<template v-else-if="currSelectIndex == 3">
											<u-grid :col="2">
												<u-grid-item v-for="(items,idx) in item.items" :key="idx"
													:custom-style="{padding:'0rpx',minHeight:'80rpx'}"
													@click="selectSubPerson(index,idx)" class="sub-content-box">
													<view :class="[YWYID == items.id ? 'active' : '']"
														class="u-flex sub-content">
														<view class="title-icon">
															<text>{{item.title}}</text>
														</view>
														<view class="u-flex-1">{{items.name}}
															({{$common.getLabelFromID(items.SSZWBH,positionList) || '--'}})
														</view>
													</view>
												</u-grid-item>
											</u-grid>
										</template>
									</template>
									<view v-else class="over-hidden">
										<u-loadmore status="nomore" margin-top="40" margin-bottom="40"
											:load-text="{nomore:'暂无数据'}" />
									</view>
								</scroll-view>
							</view>
						</template>
						<template v-else>
							<div class="popur-left">{{item.label ? item.label : item}}</div>
							<u-icon name="checkbox-mark" color="#2A8FFC" size="18"
								v-if="activeSelectIndex[currSelectIndex]  === index"></u-icon>
						</template>
					</div>
				</div>
			</view>
			<!-- 		
					<u-dropdown-item title="按部门" height="400" menu-icon-size="14">
						<view class="sub-client-content">
							<scroll-view scroll-y="true" style="max-height: 400rpx;">
								<template v-if="subdepartmentList.length > 0">
									<u-grid :col="2">
										<u-grid-item v-for="(item,index) in subdepartmentList" :key="index"
											:custom-style="{padding:'0rpx',minHeight:'80rpx'}"
											@click="selectSub(index)">
											<view :class="[BMID == item.ID ? 'active' : '']">{{item.label}}</view>
										</u-grid-item>
									</u-grid>
								</template>
							</scroll-view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="按人员" height="400" menu-icon-size="14">
						<view class="sub-client-content">
							<scroll-view scroll-y="true" style="max-height: 400rpx;">
									<view v-for="(item,index) in subList" :key="index">
										<u-grid :col="2">
											<u-grid-item v-for="(items,idx) in item.items" :key="idx"
												:custom-style="{padding:'0rpx',minHeight:'80rpx'}"
												@click="selectSubPerson(index,idx)" class="sub-content-box">
												<view :class="[YWYID == items.id ? 'active' : '']"
													class="u-flex sub-content">
													<view class="title-icon">
														<text>{{item.title}}</text>
													</view>
													<view class="u-flex-1">{{items.name}}
														({{$Utils.getLabelFromID(items.SSZWBH,positionList) || '--'}})
													</view>
												</view>
											</u-grid-item>
										</u-grid>
									</view>
							</scroll-view>
						</view>
					</u-dropdown-item>
				</u-dropdown> -->
			<!-- </view> -->
		</view>
		<scroll-view class="content u-flex-1" scroll-y @scrolltolower="scrollBottom">
			<view style="content:''; overflow: hidden;"></view>
			<block v-for="(item,index) in List" :key="index">
				<div class="plan-card" @click="goDetail(item.jh.ID,planType)">
					<div class="header">
						<view class="head-title">{{item.jh.GZJH}} <text class="complete-num"
								v-if="FBZT == '1' && planType==1">({{item.complete}})</text></view>
						<view class="head-time">最近修改时间：{{item.jh.ChgTime || '--'}}</view>
					</div>
					<div class="body">
						<view class="u-flex">
							<view class="list-content u-flex-1">
								<view class="plan-info">{{item.jhxq.JHFL}}</view>
								<view class="plan-info">{{item.jhxq.JHXQ}}</view>
							</view>
							<u-icon name="arrow-right" custom-prefix="custom-icon" color="#E5E5E5" size="20">
							</u-icon>
						</view>

						<view class="u-flex u-m-t-20 u-m-b-10">
							<u-tag :text="getLabelFromID(item.jh.JHLX) || '--'" size="mini" shape="circle" plain
								color="#2A8FFC" border-color="#2A8FFC" />
							<u-icon name="chat" custom-prefix="custom-icon" color="#C0C0C0" size="22"
								:custom-style="{'margin-left':'24rpx','margin-top':'4rpx'}">
							</u-icon>
							<view class="msg-num">{{item.sum}}</view>
						</view>
					</div>
					<div class="footer">
						发布人：{{ item.jh.AddAccName }}
					</div>
				</div>
			</block>
			<template v-if="!BMID && !YWYID && List.length==0">
				<view class="no-client">
					<view class="no-client-img">
						<u-image src="/static/images/client/no-subclient.png" width="384rpx" height="496rpx"
							:lazy-load="false" :show-loading="false" :fade="false"></u-image>
					</view>
					<view>暂无数据</view>
					<view>请先选择下属部门或者人员</view>
				</view>
			</template>
			<template v-else>
				<view class="over-hidden">
					<u-loadmore :status="listStatus" margin-top="40" margin-bottom="40" />
				</view>
			</template>

		</scroll-view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		computed: {
			...mapState(['positionList', 'subdepartmentList', 'planTypeList']),
		},
		data() {
			return {
				planType: '1', //1.发布计划 2.关联计划 4.评阅计划
				FBZT: 1, //计划是否已发布
				typeList: [{
					label: '全部',
					value: 0,
				}],
				JHLX: 0,
				typeName: '',

				allList: [], //查询到的全部数据
				List: [{
					"jh": {
						"ID": "76B53E9931C04F8E96C07BED3AA9AC40",
						"Date": "2024-05-01T00:00:00",
						"EndDate": "2024-05-31T23:59:59",
						"JHLX": "3",
						"GZJH": "2024年05月计划",
						"GZZJ": null,
						"AddTime": "2024-05-05T21:47:09.133",
						"AddAcc": "15557167200",
						"AddAccName": "林海广",
						"AddIP": "124.90.106.42",
						"ChgTime": "2024-05-05T21:47:15.277",
						"ChgAcc": "15557167200",
						"ChgAccName": "林海广",
						"ChgIP": "124.90.106.42",
						"Deleted": "0",
						"IsNM": null,
						"YWYID": "BF19F8A6C4F8421BAFB8121A6F17EF49",
						"IsFB": "1",
						"SJJHID": "",
						"JHJD": "|76B53E9931C04F8E96C07BED3AA9AC40",
						"JHZT": null,
						"IsNull": false
					},
					"jhxq": {
						"ID": "08326F3E798744C8B150898C1E39A123",
						"JHID": "76B53E9931C04F8E96C07BED3AA9AC40",
						"CompletionTime": "1900-01-01T00:00:00",
						"GLR": "",
						"GLRName": "",
						"GLRType": "",
						"JHZT": "1",
						"JHFL": "5月份计划",
						"JHXQ": "1、完成沃服二期供应商的开发功能，对销售端的客户的管理、工作计划等功能梳理完毕后整理开发计划，完成部分功能，|2、完成小休修师傅端小程序的界面调整和优化，完成客户端小程序的界面设计和程序实现。|3、完成林先森照相馆的小程序上线操作。|4、修复进销存小程序使用过程中出现的问题|5、梳理进销存系统和售后服务系统的对接工作，整理开发计划。",
						"GLKH": "",
						"GLKHName": "",
						"SJXQID": "",
						"QKSM": null,
						"XCBFSJ": "0001-01-01T00:00:00",
						"AddTime": "2024-05-05T21:47:09.183",
						"AddAcc": "15557167200",
						"AddAccName": "林海广",
						"AddIP": "124.90.106.42",
						"ChgTime": "2024-05-05T21:47:09.183",
						"ChgAcc": "15557167200",
						"ChgAccName": "林海广",
						"ChgIP": "124.90.106.42",
						"Sales": 0.0,
						"OldJHID": "",
						"ActualAmount": 0.0,
						"RelationalSchemaID": null,
						"RowID": 2,
						"JHSLLX": "",
						"IsTuiSong": 0,
						"IsRead": false,
						"TXZQ": null,
						"SFCF": null,
						"IsNull": false
					},
					"sum": 0,
					"complete": "0%"
				}, {
					"jh": {
						"ID": "8C03E16FEBF0404287513436576D0079",
						"Date": "2024-04-14T00:00:00",
						"EndDate": "2024-04-14T23:59:59",
						"JHLX": "1",
						"GZJH": "2024年04月14日 星期日计划",
						"GZZJ": null,
						"AddTime": "2024-04-14T22:40:56.497",
						"AddAcc": "15557167200",
						"AddAccName": "林海广",
						"AddIP": "211.90.235.217",
						"ChgTime": "2024-04-14T22:40:56.497",
						"ChgAcc": "15557167200",
						"ChgAccName": "林海广",
						"ChgIP": "211.90.235.217",
						"Deleted": "0",
						"IsNM": null,
						"YWYID": "BF19F8A6C4F8421BAFB8121A6F17EF49",
						"IsFB": "1",
						"SJJHID": null,
						"JHJD": "|8C03E16FEBF0404287513436576D0079",
						"JHZT": null,
						"IsNull": false
					},
					"jhxq": {
						"ID": "DED49366E7D54C168B3FA883AC34BA37",
						"JHID": "8C03E16FEBF0404287513436576D0079",
						"CompletionTime": "1900-01-01T00:00:00",
						"GLR": "",
						"GLRName": "",
						"GLRType": "",
						"JHZT": "1",
						"JHFL": "测试地址",
						"JHXQ": "我的计划",
						"GLKH": "",
						"GLKHName": "",
						"SJXQID": null,
						"QKSM": null,
						"XCBFSJ": "0001-01-01T00:00:00",
						"AddTime": "2024-04-14T22:56:32.7",
						"AddAcc": "15557167200",
						"AddAccName": "林海广",
						"AddIP": "211.90.235.217",
						"ChgTime": "2024-04-14T22:56:32.7",
						"ChgAcc": "15557167200",
						"ChgAccName": "林海广",
						"ChgIP": "211.90.235.217",
						"Sales": 0.0,
						"OldJHID": null,
						"ActualAmount": 0.0,
						"RelationalSchemaID": null,
						"RowID": 1,
						"JHSLLX": "",
						"IsTuiSong": 0,
						"IsRead": false,
						"TXZQ": null,
						"SFCF": null,
						"IsNull": false
					},
					"sum": 0,
					"complete": "0%"
				}], //列表

				pageNum: 0,
				pageSize: 20,
				listStatus: 'nomore',
				keyword: '', //关键词

				visible: false,
				finishCur: '',
				finishDateVal: [],
				planCur: '',
				planDateVal: [],

				JHZT: 1,
				subList: [], //下属列表
				userData: {},

				BMID: '', //部门id
				YWYID: '', //用户id
				readandappraiseTabs: [{ // tab栏的配置数据
						title: '',
						type: 'fetch',
						config: [{
							label: '全部',
							value: 0,
						}]
					},
					{
						title: '',
						type: 'fetch',
						config: [{
							label: '未完成',
							value: 1,
						}, {
							label: '已完成',
							value: 2,
						}]
					},
					{
						title: '按部门',
						type: 'contentDep',
						config: [{}]
					},
					{
						title: '按人员',
						type: 'contentDep',
						config: [{}],
						items: []
					}
				],
				isShowPopur: false, // 是否显示 popur
				currSelectIndex: 0, // 选中的tab栏
				activeSelectIndex: {} // 选中下拉中的item的active的索引
			}
		},
		onLoad(e) {
			const userData = uni.getStorageSync('userData') || '';
			if (userData) {
				this.userData = JSON.parse(userData).Client;
			}
			this.readandappraiseTabs[0].config = [...this.typeList, ...this.planTypeList]
			this.typeList = [...this.typeList, ...this.planTypeList]

			// if (this.$store.state.positionList.length == 0) {
			// 	this.$store.dispatch('getListFromAPI', {
			// 		vm: this,
			// 		name: 'positionList'
			// 	});
			// }
			// if (this.$store.state.subdepartmentList.length == 0) {
			// 	const code = this.userData.SSJGBH;
			// 	this.$store.dispatch('getListFromAPI', {
			// 		vm: this,
			// 		name: 'subdepartmentList',
			// 		params: {
			// 			SSJGBH: code
			// 		}
			// 	});
			// }

			// this.getXSSJList();
		},
		onShow() {
			this.pageNum = 0;
			// this.List = [];
			// this.getList();
		},
		methods: {
			getList() {
				// if(!this.BMID && !this.YWYID){ 
				// 	return false;
				// };
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let params = {
					JHBT: this.keyword,
					JHLX: this.JHLX || '',
					JHZT: this.JHZT || '',
					pageSize: 99999,
					pageNum: 1,
					BMID: this.BMID || '',
					YWYID: this.YWYID || '',
				};
				this.listStatus = 'loading';
				this.$minApi.app._GetSubordinatePlan(params).then(res => {
					const datas = res.data.model || [];
					this.allList = datas;
					this.List = datas.slice(0, this.pageSize);
					if (datas.length < this.pageSize) {
						this.listStatus = 'nomore';
					}
					uni.hideLoading();
				}).catch(() => {})
			},
			goSearch() { //搜索
				this.pageNum = 0;
				this.List = [];
				this.getList();
				this.$refs.uDropdown.close();
			},
			changeStatus() {
				this.goSearch();
			},
			change(val) {
				this.typeName = this.typeList.find(item => {
					return item.value == val
				}).label;
				this.goSearch();
			},
			open(index) {
				this.$refs.uDropdown.highlight();
				this.dropIdx = index;
			},

			selectSub(idx) {
				this.YWYID = '';
				const arr = this.subdepartmentList || [];
				if (this.BMID == arr[idx].ID) {
					this.BMID = '';
				} else {
					this.BMID = arr[idx].ID;
				}
				this.goSearch();
			},
			selectSubPerson(index, idx) {
				this.BMID = '';
				const arr = this.subList || [];
				const items = arr[index].items || [];
				if (this.YWYID == items[idx].id) {
					this.YWYID = '';
				} else {
					this.YWYID = items[idx].id;
				}
				this.goSearch();
			},
			scrollBottom() {
				const datas = this.allList;
				if (this.List.length < datas.length) {
					this.pageNum += this.pageSize;
					const list = datas.slice(this.pageNum, this.pageNum + this.pageSize);
					this.List = [...this.List, ...list];
					this.listStatus = 'loadmore';
					if (this.List.length == datas.length) {
						this.listStatus = 'nomore';
					}
				} else {
					this.listStatus = 'nomore';
				}
			},
			getLabelFromID(id) {
				const info = this.typeList.find(item => {
					return id == item.value;
				});
				if (info) {
					return info.label;
				}
				return '';
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/packagePlan/pages/planDetailSub/planDetailSub?id=${id}`
				})
			},
			getXSSJList() {
				this.$minApi.app._GetXSSJ().then(res => {
					this.subList = this._normalizeSinger(res.data.molist || []);
				}).catch(() => {})
			},
			_normalizeSinger(list) {
				let map = {};
				list.forEach((item, index) => {
					const key = item.index;
					if (!map[key]) {
						map[key] = {
							title: key,
							items: []
						}
					}

					map[key].items.push({
						name: item.KHJBXX.YGXM,
						id: item.KHJBXX.ID,
						SSZWBH: item.KHJBXX.SSZWBH
					})
				})
				let ret = [],
					hot = [];
				for (let key in map) {
					let val = map[key]
					if (val.title.match(/[a-zA-Z0-9]/)) {
						ret.push(val)
					}
				}
				ret.sort((a, b) => {
					return a.title.charCodeAt(0) - b.title.charCodeAt(0)
				})
				return hot.concat(ret)
			},
			handleSelectClick(index) {
				if (this.currSelectIndex == index && this.isShowPopur) {
					this.isShowPopur = false
					this.currSelectIndex = 0
					return
				}

				this.currSelectIndex = index
				this.isShowPopur = true
			},
			handleCardClick(item, index) {
				// 在vue2中给对象属性赋值后 失去响应式 使用this.$set
				this.$set(this.activeSelectIndex, this.currSelectIndex, index)
				console.log(this.FBZT);
				if (this.FBZT === 1) { // 发布的计划/收到的计划
					if (this.currSelectIndex == 2) { //计划时间
						this.rangeVal = this.planDateVal;
						if (index == 0) {
							this.planDateVal = [];
						}
					}

					if (this.currSelectIndex == 3) { //完成时间
						this.rangeVal = this.finishDateVal;
						if (index == 0) {
							this.finishDateVal = [];
						}
					}

					if (this.currSelectIndex == 2 || this.currSelectIndex == 3) {
						if (index == 0) {
							// 直接查询
							// this.goSearch();
						} else if (index == 1) {
							this.visible = true;
						}
					}

					if (this.currSelectIndex == 0) {
						this.JHZT = item.value
					} else if (this.currSelectIndex == 1) {
						this.JHLX = item.value
					}
				} else { // 计划草稿纸
					if (this.currSelectIndex == 1) { //计划时间
						this.rangeVal = this.planDateVal;
						if (index == 0) {
							this.planDateVal = [];
						}
					}

					if (this.currSelectIndex == 2) { //完成时间
						this.rangeVal = this.finishDateVal;
						if (index == 0) {
							this.finishDateVal = [];
						}
					}

					if (this.currSelectIndex == 1 || this.currSelectIndex == 2) {
						if (index == 0) {
							// 直接查询
							// this.goSearch();
						} else if (index == 1) {
							this.visible = true;
						}
					}

					if (this.currSelectIndex == 0) {
						this.JHLX = item.value
					}
				}
				console.log(item);
				this.isShowPopur = false
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style scoped lang="scss">
	.u-page {
		width: 100%;
		height: 100%;
		overflow: hidden;

		&::v-deep .u-cell {
			padding: 0 40rpx;
			font-size: 28rpx;
			color: #7A808A;
			line-height: 80rpx;
		}

		&::v-deep {
			.u-dropdown__menu__item__text {
				font-size: 24rpx !important;
			}
		}
	}


	.plan-card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx 40rpx;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 8rpx;


		.header {
			padding: 6rpx 18rpx;
			border-bottom: 1px solid #f1f1f5;

			.head-title {
				font-size: 32rpx;
				color: #333333;
				line-height: 50rpx;
				margin-top: 10rpx;
			}

			.complete-num {
				font-size: 28rpx;
				color: #2A8FFC;
				margin-left: 10rpx;
			}

			.head-time {
				font-size: 24rpx;
				color: #999;
			}
		}

		.list-content {
			width: 100%;
		}

		.body {
			font-size: 24rpx;
			padding: 10rpx 18rpx;
			color: #666;
			margin-right: 40rpx;
		}

		.footer {
			font-size: 24rpx;
			padding-right: 10rpx;
			text-align: right;
		}
	}


	.list-body {
		font-size: 24rpx;
		padding: 10rpx 18rpx;

		.list-content {
			overflow: hidden;
			color: #666;
			margin-right: 40rpx;

			.plan-info {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.msg-num {
			color: #C0C0C0;
			margin-left: 6rpx;
		}
	}

	.selectActiveTab {
		transition: 200ms ease;
		color: #2A8FFC !important;
	}

	.popurActive {
		height: auto #fff !important;
		z-index: 999 !important;
		opacity: 1 !important;
	}

	.popurItenActive {
		color: #2A8FFC;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	.u-flex-col {
		display: flex;
		flex-direction: column;
	}

	.u-flex-1 {
		flex: 1;
	}

	.select-tabs {
		display: flex;
		align-items: center;
		height: 45px;
		position: relative;

		.exhibition {
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
			flex: 1;
			color: #606266;
			font-size: 13px;

			.text {
				margin-right: 3px;
			}
		}

		.popur {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			opacity: 0;
			z-index: -1;
			transform: translateY(100%);
			transition: 400ms ease;
			box-shadow: 0px 2px 6px 0px rgba(47, 104, 235, .1);

			.popur-card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				box-sizing: border-box;
				width: 100%;
				padding: 18rpx 40rpx;
				font-size: 28rpx;
				line-height: 54rpx;
				color: #606266;
			}
		}
	}

	.drop-box {
		.active1 {
			&::v-deep {
				.u-dropdown__menu__item {
					position: relative;

					&:nth-child(3) {
						&::after {
							content: '';
							width: 128rpx;
							height: 2rpx;
							background-color: #2A8FFC;
							position: absolute;
							bottom: 0;
						}

						.u-dropdown__menu__item__text {
							color: #2A8FFC !important;
						}

						.u-iconfont {
							color: #2A8FFC !important;
						}
					}
				}

			}
		}

		.active2 {
			&::v-deep {
				.u-dropdown__menu__item {
					position: relative;

					&:nth-child(4) {
						&::after {
							content: '';
							width: 128rpx;
							height: 2rpx;
							background-color: #2A8FFC;
							position: absolute;
							bottom: 0;
						}

						.u-dropdown__menu__item__text {
							color: #2A8FFC !important;
						}

						.u-iconfont {
							color: #2A8FFC !important;
						}
					}
				}

			}
		}
	}

	.search-box {
		background-color: #fff;

		.search-input {
			padding: 30rpx 40rpx 20rpx;
		}
	}

	.content {
		overflow: hidden;
	}

	.select-tag {
		margin: 20rpx 40rpx;
		font-size: 24rpx;
		color: #2A8FFC;
		background-color: #DEEDFC;
		border: 1px solid #2A8FFC;
		border-radius: 10rpx;
		line-height: 48rpx;
		text-align: center;
	}

	.list-head {
		padding: 0 18rpx;
		position: relative;

		.head-title {
			font-size: 32rpx;
			color: #333333;
			line-height: 50rpx;
			margin-top: 10rpx;
		}

		.complete-num {
			font-size: 28rpx;
			color: #2A8FFC;
			margin-left: 10rpx;
		}

		.head-time {
			font-size: 24rpx;
			color: #999;
		}

		.isview {
			width: 20rpx;
			height: 20rpx;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			top: -10rpx;
			right: 0;
		}
	}

	.list-body {
		font-size: 24rpx;
		padding: 10rpx 18rpx;

		.list-content {
			overflow: hidden;
			color: #666;
			margin-right: 40rpx;

			.plan-info {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.msg-num {
			color: #C0C0C0;
			margin-left: 6rpx;
		}
	}


	.sub-client-content {
		background-color: #fff;
		text-align: center;

		.active {
			color: #2A8FFC;
		}

		.sub-content-box {
			font-size: 24rpx;

			&:nth-child(1) {
				.sub-content {
					.title-icon {
						text {
							display: block;
						}
					}
				}
			}

			.sub-content {
				text-align: left;
				width: 100%;

				.title-icon {
					width: 100rpx;
					text-align: center;

					text {
						width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						display: none;
						background: #2A8FFC;
						color: #fff;
						border-radius: 50%;
						margin: 0 auto;
						font-size: 24rpx;
					}
				}
			}
		}

	}

	.no-client {
		text-align: center;
		font-size: 28rpx;
		color: #7A808A;

		.no-client-img {
			margin: 40rpx auto 0;
			display: flex;
			justify-content: center;
		}
	}
</style>